import React, { useState } from 'react';
import { RootState } from '../../store/store';
import { useLocation, useNavigate } from 'react-router';
import './index.css'
import { useDispatch, useSelector } from 'react-redux';
import { Button, Space } from 'antd-mobile'
import { CapsuleTabs } from 'antd-mobile'
import { NavBar } from 'antd-mobile'
import { addComment, removeComment, updateComment } from '../../store/comments';

const Index: React.FC = () => {
  const data = useLocation().state.data;
  const comments = useSelector((state: RootState) => state.comments.comments); 
  console.log(data);
  const nav = useNavigate();
  const back = () => {
    nav(-1)
  }

  const handleButton = () => {
    nav('/diagnosiscomment')
  }

  const dispatch = useDispatch();

  const handleDeleteComment = (id: number) => {
    dispatch(removeComment(id));
  }; 

  const handleUpdateComment = (id: number, newContent: string) => {
    dispatch(updateComment({ id, content: newContent }));
  };
  //  Diagnosiscomment
  return (
    <div className='commentBox'>
      <div className='commentHeader'>
        <NavBar onBack={back}>患者评价</NavBar>
      </div>
      <div className='commentMain'>
        <div className='commentUser'>
          <div className='commentUserFind'>
            <div className='commentUserFindLeft'>
              <img src={data.image} alt="" className='commentUserFindLeftImg' />
            </div>
            <div className='commentUserFindRight'>
              <div className='commentUserFinRightS'>
                <div className='commentUserFinRightTop'>
                  <div className='commentUserFinRightTopText'>
                    <span className='textName'>
                      {
                        data.name
                      }
                    </span>
                    <span className='texnse'>
                      了解医生 &gt;
                    </span>
                  </div>
                  <div>
                    {
                      data.type
                    }
                  </div>
                </div>
                <div className='commentUserFinRightBottom'>
                  {
                    data.hospital
                  }
                  {
                    data.keshi
                  }
                </div>
              </div>

            </div>
          </div>
        </div>

        <div className='commentTab'>
          <div className='commentTabBox'>
            <CapsuleTabs>
              <CapsuleTabs.Tab title='线下诊疗评价' key='fruits'>
                <div >
                  {comments.map((comment: any) => (
                    <div key={comment.id}>
                      <p>{comment.author} says:</p>
                      <p>{comment.content}</p>
                      <button onClick={() => handleDeleteComment(comment.id)}>
                        删除
                      </button>
                      <button onClick={() => handleUpdateComment(comment.id, prompt('Edit comment:', comment.content) || comment.content)}>
                        修改
                      </button>
                    </div>
                  ))}
                </div>
              </CapsuleTabs.Tab>
              <CapsuleTabs.Tab title='线上服务评价' key='vegetables'>
                线上服务评价
              </CapsuleTabs.Tab>
            </CapsuleTabs>
          </div>
        </div>

      </div>
      <div className='commentFotter'>
        <Button onClick={handleButton} block color='primary' size='large'>
          写珍后评论
        </Button>
      </div>

    </div>
  );
};

export default Index;